<template>
  <div ref="target" style="width: 320px;height: 160px;background: aquamarine">
    <h3>Mouse: {{ x }} x {{ y }}</h3>
    <h3>elementMouse: {{ elementX }} x {{ elementY }}</h3>
    <h3>isOutside: {{ isOutside }}</h3>
  </div>

</template>
<script setup>
import {ref} from '@vue/composition-api'
import {useMouseInElement} from "@vueuse/core";

const target = ref(null)
let {x, y, elementX, elementY, isOutside} = useMouseInElement(target)
</script>

<!--<script>-->
<!--import {ref} from '@vue/composition-api'-->
<!--import {useMouseInElement} from "@vueuse/core";-->

<!--export default {-->
<!--  name: 'useMouseInElement',-->
<!--  setup() {-->
<!--    const mouse = ref(null)-->
<!--    let {x, y, elementX, elementY, isOutside} = useMouseInElement(mouse)-->
<!--    return {x, y, elementX, elementY, isOutside}-->
<!--  }-->
<!--}-->
<!--</script>-->

<style scoped>

</style>
